<!DOCTYPE html>
<html lang="zh">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>内网监控系统</title>
    <meta name="description" content="内网监控系统">
    <meta name="keywords" content="内网监控系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/plugins/elementui/index.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/content.css">
</head>
<body class="gray-bg">
<div id="app">
    <el-form :inline="true" :model="pagination" class="form-inline" style="margin-top: 10px;">
        <el-form-item>
            <el-input v-model="pagination.queryString" placeholder="设备名称"></el-input>
        </el-form-item>
        <el-form-item label="生成时间">
            <el-select v-model="pagination.orderRule" placeholder="请选择时间顺序">
                <el-option label="降序" value="desc"></el-option>
                <el-option label="升序" value="asc"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleCurrentChange(1)">搜索</el-button>
        </el-form-item>
    </el-form>

    <template>
        <el-table :data="tableData"
                  stripe
                  style="background-color: unset">
            <el-table-column label="ID">
                <template slot-scope="scope">
                    <span>{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="设备ID" width="350">
                <template slot-scope="scope">
                    <span>{{ scope.row.device_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="设备名称" width="200">
                <template slot-scope="scope">
                    <span>{{ scope.row.status_info.device_name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="CPU使用率" width="100">
                <template slot-scope="scope">
                    <i class="el-icon-cpu"></i>
                    <span>{{ scope.row.status_info.cpu_status.usage }}</span>
                </template>
            </el-table-column>

            <el-table-column label="内存使用率" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.status_info.ram_status.usage }}</span>
                </template>
            </el-table-column>

            <el-table-column label="网络上传速率" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.status_info.network_adapter_status.send_usage }}</span>
                </template>
            </el-table-column>

            <el-table-column label="网络下载速率" width="120">
                <template slot-scope="scope">
                    <span>{{ scope.row.status_info.network_adapter_status.receive_usage }}</span>
                </template>
            </el-table-column>

            <el-table-column label="生成时间" width="230">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span>{{ scope.row.event_time }}</span>
                </template>
            </el-table-column>

        </el-table>
    </template>

    <div class="pagination-container" style="margin-top: 10px">
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>

</div>
</body>

<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/plugins/elementui/index.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            pagination: { //分页相关模型数据
                currentPage: 1, //当前页码
                pageSize: 8, //每页显示的记录数
                total: 0, //总记录数
                queryString: null, //查询条件
                orderColumn: "event_time", //排序列
                orderRule: "desc" //排序规则
            },
            tableData: [], //当前页要展示的列表数据
            formData: {}, //表单数据
            dialogFormVisible4Detail: false, //编辑表单是否可见
            searchForm: {
                deviceName: '',
                eventTime: ''
            }
        },
        created() {
            this.findPage();
        },
        methods: {
            // 查询所有
            findAll() {
                axios.get("/status/findAll").then(res => {
                    // console.log(res.data);
                    if (res.data.flag) {
                        this.tableData = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            // 分页查询
            findPage() {
                axios.post("/status/findPage", this.pagination).then(res => {
                    // console.log(res.data);
                    if (res.data.flag) {
                        //res => {flag, code, message, data : {total, rows}}
                        // 分页的结果
                        this.tableData = res.data.data.rows;
                        // 总记录
                        this.pagination.total = res.data.data.total;
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },

        }
    })
</script>
</html>